@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  /* 应用UI固定样式变量 */
  --app-primary: #3498db;
  --app-background: #ffffff;
  --app-text: #333333;
  --app-accent: #e74c3c;
  
  /* 默认卡片样式变量 */
  --card-background: #ffffff;
  --card-primary-color: #3498db;
  --card-text-color: #333333;
  --card-accent-color: #e74c3c;
  --card-font-family: Arial, sans-serif;
  --card-border-radius: 8px;
  --card-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

@layer components {
  .app-container {
    @apply flex flex-col h-screen max-w-7xl mx-auto;
  }

  .app-header {
    @apply flex items-center justify-between p-4 border-b border-gray-200;
    background-color: var(--app-background);
    color: var(--app-text);
  }

  .app-header h1 {
    color: var(--app-primary);
  }

  .theme-controls {
    @apply flex gap-2;
  }

  .theme-controls button {
    @apply px-4 py-2 text-white rounded transition-opacity hover:opacity-90;
    background-color: var(--app-primary);
  }

  .export-button {
    @apply px-4 py-2 text-white rounded transition-opacity hover:opacity-90;
    background-color: var(--app-accent);
  }

  .app-main {
    @apply flex flex-1 overflow-hidden;
  }

  .editor-panel {
    @apply flex-1 p-4 border-r border-gray-200 overflow-auto;
  }

  .preview-panel {
    @apply flex-1 p-4 overflow-auto flex items-center justify-center bg-gray-100;
  }

  .card-container {
    @apply w-full max-w-2xl overflow-hidden transition-all duration-300;
    background: var(--card-background);
    color: var(--card-text-color);
    font-family: var(--card-font-family);
    border-radius: var(--card-border-radius);
    box-shadow: var(--card-box-shadow);
  }

  /* Theme-specific styles */
  [data-theme="instagram"] #card-preview,
  .theme-instagram {
    background: linear-gradient(45deg, #833ab4, #fd1d1d, #fcb045);
  }

  /* Instagram主题的特殊样式 */
  [data-theme="instagram"] .card-tag,
  .theme-instagram .card-tag {
    @apply bg-white text-[#833ab4] font-bold;
    text-shadow: none;
  }

  [data-theme="instagram"] .card-link,
  .theme-instagram .card-link {
    @apply text-white border-white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  }

  [data-theme="instagram"] .card-title,
  .theme-instagram .card-title,
  [data-theme="instagram"] .heading-2,
  .theme-instagram .heading-2,
  [data-theme="instagram"] .heading-3,
  .theme-instagram .heading-3 {
    @apply text-white border-white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  }

  [data-theme="instagram"] .card-content,
  .theme-instagram .card-content {
    @apply text-white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  }

  [data-theme="twitter"] #card-preview,
  .theme-twitter {
    background: var(--card-background);
  }

  [data-theme="pinterest"] #card-preview,
  .theme-pinterest {
    background: var(--card-background);
  }

  [data-theme="dark"] #card-preview,
  .theme-dark {
    background: var(--card-background);
  }

  .card-content {
    @apply p-8;
    color: var(--text-color);
  }

  .card-title {
    @apply text-4xl leading-tight mt-0 mb-6 border-l-4 pl-4;
    color: var(--card-primary-color);
    border-color: var(--card-accent-color);
  }

  .heading-2 {
    @apply text-2xl font-bold mt-6 mb-4;
    color: var(--card-primary-color);
  }

  .heading-3 {
    @apply text-xl font-semibold mt-5 mb-3;
    color: var(--card-primary-color);
  }

  .card-paragraph {
    @apply mb-4 leading-relaxed;
  }

  .card-image {
    @apply max-w-full rounded-lg my-4;
  }

  .card-link {
    @apply no-underline transition-opacity duration-200 hover:opacity-80;
    color: var(--card-primary-color);
    border-bottom: 1px solid var(--card-primary-color);
  }

  .card-tag {
    @apply inline-flex items-center justify-center px-3 py-1 mr-2 mb-2 rounded-full text-sm font-medium mt-4;
    background-color: var(--card-primary-color);
    color: white;
    line-height: 1;
    height: 28px;
  }

  /* List styles */
  .card-ordered-list {
    @apply list-decimal pl-6 mb-4 space-y-2;
    counter-reset: item;
  }

  .card-unordered-list {
    @apply list-disc pl-6 mb-4 space-y-2;
  }

  .card-list-item {
    @apply pl-1 mb-1;
  }

  .card-callout {
    @apply my-6 p-4 rounded-lg bg-opacity-10 border-l-4 mt-8;
  }

  .card-callout-tip {
    @apply bg-green-100 border-green-500;
  }

  .card-callout-info {
    @apply bg-blue-100 border-blue-500;
  }

  .card-callout-warning {
    @apply bg-orange-100 border-orange-500;
  }

  .card-code-block {
    @apply my-4 p-4 bg-gray-50 rounded-lg overflow-x-auto font-mono text-sm;
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  .app-main {
    @apply flex-col;
  }

  .editor-panel,
  .preview-panel {
    @apply flex-none h-1/2;
  }

  .editor-panel {
    @apply border-r-0 border-b border-gray-200;
  }
}
